yToggle

Description

The yToggle component is a versatile UI element designed for toggling between two states, such as on/off or true/false. It provides an intuitive way for users to make binary choices with a simple click or tap. The yToggle is perfect for:

• Adjusting settings and preferences

Basic Structure

The basic structure of the yToggle includes a track and a thumb. The track serves as the background over which the thumb slides, indicating the current state. Optionally, labels can be added to either side of the toggle to represent the states or provide additional information.

Track

The track can be styled individually and will serve as the background of the toggles main element.

Slider

The slider is the toggles indicator for the state.

Label

The label can display a title and will tell the user what the toggle is used for. There can be either a label on the left or on the right or both. These labels cannot be configured individually, but are configured together at the same time.

Properties

Through its various properties the yToggle can be configured to suit your needs. The display below provides you with an overview of all the yToggle properties.

Properties can be changed directly through three methods:

• Inside the Toolbar, which is positioned in your workarea next to your component right where you need it. It shows the most important properties, thus providing a fast and efficient way to configure your component in the most basic way.
• It may also occur in the Toolbar Extension, which is a seamless extension accesible as a dropdown item of the Toolbar. It extends the functionality of the Toolbar by providing advanced pickers for the most used properties.
• Inside the Detail Panel, which is located in the righthand drawer. Every property of a component can be configured here.

Generic

METAread more

Name: componentId

Not Editable

Number Property

--y-toggle__component-id

The identifier of the component that is unique within a page.

Name: componentType

Not Editable

String Property

--y-toggle__component-type

The type of the component. For this component it is -toggle.

Name: name

String Property

--y-toggle__name

The custom name of the component. It serves for better identification of the component.

Name: version

String Property

--y-toggle__version

The custom version of the Toggle-component. This can be used to ensure that all components work well together.

Name: coreTheme

String Property

--y-toggle__core-theme

The CoreTheme, which will be apllied to the Toggle. For further information on themes visit the themes page.

Name: subTheme

String Property

--y-toggle__sub-theme

The subtheme subordinated to the previously specified CoreTheme, which will be apllied to the Toggle. For further information on themes visit the themes page.

Name: groupTheme

String Property

--y-toggle__group-theme

The group theme is a further variation of the subtheme which is specified especially for variations of a component inside the subtheme. For further information on themes visit the Theme-Manager page.

DISPLAYread more

Name: display

String Property

--y-toggle__display

This property specifies the display behavior of the component. This can be be set to:

• none
• block
• flex
• inline

Name: position

Not Editable

String Property

--y-toggle__position

This property specifies the type of positioning method used for the component. This can be be set to:

• static
• relative
• absolute
• sticky
• fixed

Name: visible

String Property

--y-toggle__visible

This property can toggle the visibility of the component. The two modes are completely hidden and fully shown.

SIZEread more

Name: minWidth

Injectable

UnitNumber Property

--y-toggle__min-width

The minimum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: minHeight

Injectable

UnitNumber Property

--y-toggle__min-height

The minimum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %

Name: width

Injectable

UnitNumber Property

--y-toggle__width

The value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: height

Injectable

UnitNumber Property

--y-toggle__height

The value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• auto

Name: maxWidth

Injectable

UnitNumber Property

--y-toggle__max-width

The maximum value for the width of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: maxHeight

Injectable

UnitNumber Property

--y-toggle__max-height

The maximum value for the height of the component. This can be set in:

• px
• pt
• em
• vw
• vh
• %
• none

Name: flex

String Property

--y-toggle__flex

The flex property sets the length on flexible items. This sets the value in n-fold shares extrapolated to all other components with the flex display within the same container.

PLACEMENTread more

Name: marginTop

Injectable

UnitNumber Property

--y-toggle__margin-top

This property creates a space around the component, outside of the top border. This can be set in percent or pixels.

Name: marginRight

Injectable

UnitNumber Property

--y-toggle__margin-right

This property creates a space around the component, outside of the right border. This can be set in percent or pixels.

Name: marginBottom

Injectable

UnitNumber Property

--y-toggle__margin-bottom

This property creates a space around the component, outside of the bottom border. This can be set in percent or pixels.

Name: marginLeft

Injectable

UnitNumber Property

--y-toggle__margin-left

This property creates a space around the component, outside of the left border. This can be set in percent or pixels.

Name: paddingTop

Injectable

UnitNumber Property

--y-toggle__padding-top

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Name: paddingRight

Injectable

UnitNumber Property

--y-toggle__padding-right

This property creates a space within the component, inside of the right border. This can be set in percent or pixels.

Name: paddingBottom

Injectable

UnitNumber Property

--y-toggle__padding-bottom

This property creates a space within the component, inside of the bottom border. This can be set in percent or pixels.

Name: paddingLeft

Injectable

UnitNumber Property

--y-toggle__padding-left

This property creates a space within the component, inside of the top border. This can be set in percent or pixels.

Style

BACKGROUNDread more

Name: bgColor

Injectable

Color Property

--y-toggle__bg-color

--y-toggle__bg-color__normal

--y-toggle__bg-color__hover

--y-toggle__bg-color__focus

--y-toggle__bg-color__active

--y-toggle__bg-color__disabled

--y-toggle__bg-color__error

The color of the background. This can be set as a color from a palette or a custom hex color.

BORDERread more

Name: borderTopColor

Injectable

Color Property

--y-toggle__border-top-color

--y-toggle__border-top-color__normal

--y-toggle__border-top-color__hover

--y-toggle__border-top-color__focus

--y-toggle__border-top-color__active

--y-toggle__border-top-color__disabled

--y-toggle__border-top-color__error

The color of the top border. This can be set as a color from a palette or a custom hex color.

Name: borderTopStyle

Injectable

String Property

--y-toggle__border-top-style

--y-toggle__border-top-style__normal

--y-toggle__border-top-style__hover

--y-toggle__border-top-style__focus

--y-toggle__border-top-style__active

--y-toggle__border-top-style__disabled

--y-toggle__border-top-style__error

The style of the top border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderTopWidth

Injectable

UnitNumber Property

--y-toggle__border-top-width

--y-toggle__border-top-width__normal

--y-toggle__border-top-width__hover

--y-toggle__border-top-width__focus

--y-toggle__border-top-width__active

--y-toggle__border-top-width__disabled

--y-toggle__border-top-width__error

The width of the top border. This can be set in percent or pixels.

Name: borderRightColor

Injectable

Color Property

--y-toggle__border-right-color

--y-toggle__border-right-color__normal

--y-toggle__border-right-color__hover

--y-toggle__border-right-color__focus

--y-toggle__border-right-color__active

--y-toggle__border-right-color__disabled

--y-toggle__border-right-color__error

The color of the right border. This can be set as a color from a palette or a custom hex color.

Name: borderRightStyle

Injectable

String Property

--y-toggle__border-right-style

--y-toggle__border-right-style__normal

--y-toggle__border-right-style__hover

--y-toggle__border-right-style__focus

--y-toggle__border-right-style__active

--y-toggle__border-right-style__disabled

--y-toggle__border-right-style__error

The style of the right border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderRightWidth

Injectable

UnitNumber Property

--y-toggle__border-right-width

--y-toggle__border-right-width__normal

--y-toggle__border-right-width__hover

--y-toggle__border-right-width__focus

--y-toggle__border-right-width__active

--y-toggle__border-right-width__disabled

--y-toggle__border-right-width__error

The width of the right border. This can be set in percent or pixels.

Name: borderBottomColor

Injectable

Color Property

--y-toggle__border-bottom-color

--y-toggle__border-bottom-color__normal

--y-toggle__border-bottom-color__hover

--y-toggle__border-bottom-color__focus

--y-toggle__border-bottom-color__active

--y-toggle__border-bottom-color__disabled

--y-toggle__border-bottom-color__error

The color of the bottom border. This can be set as a color from a palette or a custom hex color.

Name: borderBottomStyle

Injectable

String Property

--y-toggle__border-bottom-style

--y-toggle__border-bottom-style__normal

--y-toggle__border-bottom-style__hover

--y-toggle__border-bottom-style__focus

--y-toggle__border-bottom-style__active

--y-toggle__border-bottom-style__disabled

--y-toggle__border-bottom-style__error

The style of the bottom border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderBottomWidth

Injectable

UnitNumber Property

--y-toggle__border-bottom-width

--y-toggle__border-bottom-width__normal

--y-toggle__border-bottom-width__hover

--y-toggle__border-bottom-width__focus

--y-toggle__border-bottom-width__active

--y-toggle__border-bottom-width__disabled

--y-toggle__border-bottom-width__error

The width of the bottom border. This can be set in percent or pixels.

Name: borderLeftColor

Injectable

Color Property

--y-toggle__border-left-color

--y-toggle__border-left-color__normal

--y-toggle__border-left-color__hover

--y-toggle__border-left-color__focus

--y-toggle__border-left-color__active

--y-toggle__border-left-color__disabled

--y-toggle__border-left-color__error

The color of the left border. This can be set as a color from a palette or a custom hex color.

Name: borderLeftStyle

Injectable

String Property

--y-toggle__border-left-style

--y-toggle__border-left-style__normal

--y-toggle__border-left-style__hover

--y-toggle__border-left-style__focus

--y-toggle__border-left-style__active

--y-toggle__border-left-style__disabled

--y-toggle__border-left-style__error

The style of the left border. This can be be set to:

• solid
• dotted
• dashed
• none

Name: borderLeftWidth

Injectable

UnitNumber Property

--y-toggle__border-left-width

--y-toggle__border-left-width__normal

--y-toggle__border-left-width__hover

--y-toggle__border-left-width__focus

--y-toggle__border-left-width__active

--y-toggle__border-left-width__disabled

--y-toggle__border-left-width__error

The width of the left border. This can be set in percent or pixels.

Name: borderRadius

Injectable

UnitNumber Property

--y-toggle__border-radius

The radius of the corners of all the borders. This can be set in percent or pixels.

SHADOWread more

Name: boxShadow

Injectable

String Property

--y-toggle__box-shadow

--y-toggle__box-shadow__normal

--y-toggle__box-shadow__hover

--y-toggle__box-shadow__active

--y-toggle__box-shadow__focus

--y-toggle__box-shadow__disabled

--y-toggle__box-shadow__error

The shadow of the component. This is set by the 4 sub-properties x, y, blur and spread of the shadow-property, which can be further read about in the shadow-property section.

OPACITYread more

Name: opacity

Injectable

Number Property

--y-toggle__opacity

--y-toggle__opacity__normal

--y-toggle__opacity__hover

--y-toggle__opacity__active

--y-toggle__opacity__focus

--y-toggle__opacity__disabled

--y-toggle__opacity__error

The opacity of all colored parts of the component. This value is set in percent.

LABELread more

Name: label__fontColor

Injectable

Color Property

--y-toggle__label__font-color

--y-toggle__label__font-color__normal

--y-toggle__label__font-color__hover

--y-toggle__label__font-color__focus

--y-toggle__label__font-color__active

--y-toggle__label__font-color__disabled

--y-toggle__label__font-color__error

The color of the label text. This can be set as a color from a palette or a custom hex color.

Name: label__fontFamily

Injectable

String Property

--y-toggle__label__font-family

--y-toggle__label__font-family__normal

--y-toggle__label__font-family__hover

--y-toggle__label__font-family__focus

--y-toggle__label__font-family__active

--y-toggle__label__font-family__disabled

--y-toggle__label__font-family__error

The font-family of the label text. This can be picked from a large list of provided fonts.

Name: label__fontWeight

Injectable

Number Property

--y-toggle__label__font-weight

--y-toggle__label__font-weight__normal

--y-toggle__label__font-weight__hover

--y-toggle__label__font-weight__focus

--y-toggle__label__font-weight__active

--y-toggle__label__font-weight__disabled

--y-toggle__label__font-weight__error

The font-weight of the label text. This can be set in a custom number, as example:

• 400 = normal(regular)
• 500 = medium
• 600 = semi bold
• 700 = bold

Name: label__fontStyle

Injectable

String Property

--y-toggle__label__font-style

--y-toggle__label__font-style__normal

--y-toggle__label__font-style__hover

--y-toggle__label__font-style__focus

--y-toggle__label__font-style__active

--y-toggle__label__font-style__disabled

--y-toggle__label__font-style__error

The font-style of the label text. This can be set to normal, italic or oblique.

Name: label__textTransform

Injectable

String Property

--y-toggle__label__text-transform

--y-toggle__label__text-transform__normal

--y-toggle__label__text-transform__hover

--y-toggle__label__text-transform__focus

--y-toggle__label__text-transform__active

--y-toggle__label__text-transform__disabled

--y-toggle__label__text-transform__error

The text-transformation of the label text. This can be set to:

• capitalize
• uppercase
• lowercase
• none
• full-width

Name: label__textDecoration

Injectable

String Property

--y-toggle__label__text-decoration

--y-toggle__label__text-decoration__normal

--y-toggle__label__text-decoration__hover

--y-toggle__label__text-decoration__focus

--y-toggle__label__text-decoration__active

--y-toggle__label__text-decoration__disabled

--y-toggle__label__text-decoration__error

The text-decoration of the label text. This can be set to:

• strikethrough
• underline

Name: label__fontSize

Injectable

UnitNumber Property

--y-toggle__label__font-size

The font-size of the label text. This can be set in: -cm

• mm
• in
• px
• em
• ex
• ch
• rem

Name: label__fontAlign

Injectable

String Property

--y-toggle__label__font-align

The font-align of the label text. This property moves the label text to the desired position, it can be set to left, center or right.

Name: label

String Property

--y-toggle__label

The actual written text in the label. There is no limit to the number of characters.

Name: leftLabel

String Property

--y-toggle__left-label

The actual written text in the left label. There is no limit to the number of characters.

TRACKread more

Name: trackOff__color

Injectable

Color Property

--y-toggle__track-off__color

--y-toggle__track-off__color__normal

--y-toggle__track-off__color__hover

--y-toggle__track-off__color__focus

--y-toggle__track-off__color__active

--y-toggle__track-off__color__disabled

--y-toggle__track-off__color__error

The color of the turned off track. This can be set as a color from a palette or a custom hex color.

Name: trackOn__color

Injectable

Color Property

--y-toggle__track-on__color

--y-toggle__track-on__color__normal

--y-toggle__track-on__color__hover

--y-toggle__track-on__color__focus

--y-toggle__track-on__color__active

--y-toggle__track-on__color__disabled

--y-toggle__track-on__color__error

The color of the turned on track. This can be set as a color from a palette or a custom hex color.

THUMBread more

Name: thumbOff__color

Injectable

Color Property

--y-toggle__thumb-off__color

--y-toggle__thumb-off__color__normal

--y-toggle__thumb-off__color__hover

--y-toggle__thumb-off__color__focus

--y-toggle__thumb-off__color__active

--y-toggle__thumb-off__color__disabled

--y-toggle__thumb-off__color__error

The color of the turned off thumb. This can be set as a color from a palette or a custom hex color.

Name: thumbOn__color

Injectable

Color Property

--y-toggle__thumb-on__color

--y-toggle__thumb-on__color__normal

--y-toggle__thumb-on__color__hover

--y-toggle__thumb-on__color__focus

--y-toggle__thumb-on__color__active

--y-toggle__thumb-on__color__disabled

--y-toggle__thumb-on__color__error

The color of the turned on thumb. This can be set as a color from a palette or a custom hex color.

Name: value

Boolean Property

--y-toggle__value

The preset value of the thumb (e.g. 'true' or 'false').

Toggle

STATEread more

Name: disabled

Boolean Property

--y-toggle__disabled

This property can disable or enable the disabled-state of the Toggle-component.

Name: error

Boolean Property

--y-toggle__error

This property can disable or enable the error-state of the Toggle-component.

TOOLTIPread more

Name: tooltip

String Property

--y-toggle__tooltip

The text of the tooltip, which is displayed when hovering over the Toggle-component. If you do not insert anything, no tooltip appears.

ERRORread more

Name: errorMessage

String Property

--y-toggle__error-message

The message to be displayed, if an error occurs.

Links

VALUEread more

Name: sourceLinkValue

String Property

--y-toggle__source-link-value

This property defines a link to another component by specifying the componentId or componentName, Page, Component, ID, Event. The data from the link will represent true or false.

Events

LIFECYCLEread more

Name: EvtInit

String Property

--y-toggle__-evt-init

This specifies the function to be called, when the Toggle is initialized.

INPUTread more

Name: EvtClicked

String Property

--y-toggle__-evt-clicked

The event that is triggered when clicking inside the input field.

Usage

In this section you will find a collection of application scenarios and examples that illustrate how to leverage the yToggle in ways that deviate from its standard behavior, as defined by yBase. This section aims to inspire and guide you through various possibilities, helping you to implement more complex or unique functionalities tailored to your specific needs. General properties that are universally applicable can be found in the yBase usage section.

Variations

Elevated

Flat

Outlined

Rounded

Plain

Elevated

genericarrow_forward_iossizearrow_forward_iosminWidth95px

genericarrow_forward_iossizearrow_forward_iosheight30px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosshadowarrow_forward_iosboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#FFFFFF

stylearrow_forward_iostrackarrow_forward_iostrackOff__color__normal#FFFFFF

stylearrow_forward_iostrackarrow_forward_iostrackOn__color__normal#FFFFFF

stylearrow_forward_iosthumbarrow_forward_iosthumbOff__color__normal#44ddbb

stylearrow_forward_iosthumbarrow_forward_iosthumbOn__color__normal#44ddbb

Flat

genericarrow_forward_iossizearrow_forward_iosminWidth95px

genericarrow_forward_iossizearrow_forward_iosheight30px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#FFFFFF

stylearrow_forward_iostrackarrow_forward_iostrackOff__color__normal#FFFFFF

stylearrow_forward_iostrackarrow_forward_iostrackOn__color__normal#FFFFFF

stylearrow_forward_iosthumbarrow_forward_iosthumbOff__color__normal#44ddbb

stylearrow_forward_iosthumbarrow_forward_iosthumbOn__color__normal#44ddbb

Outlined

genericarrow_forward_iossizearrow_forward_iosminWidth95px

genericarrow_forward_iossizearrow_forward_iosheight30px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normaltransparent

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderStyleTop__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleRight__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleBottom__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderStyleLeft__normalsolid

stylearrow_forward_iosborderarrow_forward_iosborderWidthTop__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthRight__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthBottom__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderWidthLeft__normal2px

stylearrow_forward_iosborderarrow_forward_iosborderColorTop__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorRight__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorBottom__normal#44ddbb

stylearrow_forward_iosborderarrow_forward_iosborderColorLeft__normal#44ddbb

stylearrow_forward_iostrackarrow_forward_iostrackOff__color__normal#44ddbb

stylearrow_forward_iostrackarrow_forward_iostrackOn__color__normal#44ddbb

stylearrow_forward_iosthumbarrow_forward_iosthumbOff__color__normal#FFFFFF

stylearrow_forward_iosthumbarrow_forward_iosthumbOn__color__normal#FFFFFF

Rounded

genericarrow_forward_iossizearrow_forward_iosminWidth95px

genericarrow_forward_iossizearrow_forward_iosheight30px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normal#44ddbb

stylearrow_forward_iosshadowarrow_forward_iosboxShadow__normal0 3px 6px 0 rgba(16, 18, 24, 0.2)

stylearrow_forward_iosborderarrow_forward_iosborderRadius20px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#FFFFFF

stylearrow_forward_iostrackarrow_forward_iostrackOff__color__normal#FFFFFF

stylearrow_forward_iostrackarrow_forward_iostrackOn__color__normal#FFFFFF

stylearrow_forward_iosthumbarrow_forward_iosthumbOff__color__normal#44ddbb

stylearrow_forward_iosthumbarrow_forward_iosthumbOn__color__normal#44ddbb

Plain

genericarrow_forward_iossizearrow_forward_iosminWidth95px

genericarrow_forward_iossizearrow_forward_iosheight30px

stylearrow_forward_iosbackgroundarrow_forward_iosbgColor__normaltransparent

stylearrow_forward_iosborderarrow_forward_iosborderRadius8px

stylearrow_forward_ioslabelarrow_forward_ioslabel__fontColor__normal#44ddbb

stylearrow_forward_iostrackarrow_forward_iostrackOff__color__normal#44ddbb

stylearrow_forward_iostrackarrow_forward_iostrackOn__color__normal#44ddbb

stylearrow_forward_iosthumbarrow_forward_iosthumbOff__color__normal#FFFFFF

stylearrow_forward_iosthumbarrow_forward_iosthumbOn__color__normal#FFFFFF

Thumb Styling

Traffic Light

Neutral

Black and Yellow

Traffic Light

genericarrow_forward_iossizearrow_forward_iosminWidth70px

stylearrow_forward_iostrackarrow_forward_iostrackOn__color#4CAF50

stylearrow_forward_iostrackarrow_forward_iostrackOff__color#F44336

stylearrow_forward_iosthumbarrow_forward_iosthumbOn__color#FFFFFF

stylearrow_forward_iosthumbarrow_forward_iosthumbOff__color#FFFFFF

Neutral

genericarrow_forward_iossizearrow_forward_iosminWidth70px

stylearrow_forward_iostrackarrow_forward_iostrackOn__color#2196F3

stylearrow_forward_iostrackarrow_forward_iostrackOff__color#CCCCCC

stylearrow_forward_iosthumbarrow_forward_iosthumbOn__color#FFFFFF

stylearrow_forward_iosthumbarrow_forward_iosthumbOff__color#888888

Black and Yellow

genericarrow_forward_iossizearrow_forward_iosminWidth70px

stylearrow_forward_iostrackarrow_forward_iostrackOn__color#333333

stylearrow_forward_iostrackarrow_forward_iostrackOff__color#EEEEEE

stylearrow_forward_iosthumbarrow_forward_iosthumbOn__color#FFEB3B

stylearrow_forward_iosthumbarrow_forward_iosthumbOff__color#FFFFFF

Label Positioning

Label Left

Label Right

Label Both

Label Left

genericarrow_forward_iossizearrow_forward_iosminWidth70px

stylearrow_forward_ioslabelarrow_forward_iosleftLabel'left'

Label Right

genericarrow_forward_iossizearrow_forward_iosminWidth100px

stylearrow_forward_ioslabelarrow_forward_ioslabel'right'

Label Both

genericarrow_forward_iossizearrow_forward_iosminWidth70px

stylearrow_forward_ioslabelarrow_forward_iosleftLabel'left'

stylearrow_forward_ioslabelarrow_forward_ioslabel'right'

stylearrow_forward_ioslabelarrow_forward_iostextTransform'uppercase'

Setting the yToggle Value

The yToggle component's value can be dynamically assigned either programmatically via JavaScript or by establishing a link to another component's value—known as a SourceLink. This flexibility allows the yToggle to respond to user interactions or application states in real time.

Via JavaScript

To set the yToggle's value using JavaScript, access the value property within the Style > Thumb category. This method is ideal for changing the yToggle's state based on user interactions or other events within your application.

Here’s how you can set the value in JavaScript:

Toggle EvtClicked

// function onToggle_1_EvtClicked (apiObject, component, eventData) {
const desiredValue = true; // true or false
component.set("style", "thumb", "value", desiredValue);
// }

Simply replace desiredValue with the appropriate boolean or comparable value that corresponds to the yToggle's position.

Via SourceLink Picker

To link the yToggle’s value with another component, use the SourceLink Picker. This feature binds the yToggle’s state to another component's value, allowing for integrated component behavior.

Navigate to the SourceLink Picker section in the property settings and select the component you wish to link with. Once configured, the style > thumb > value of the yToggle will reflect the value provided by the linked component, ensuring synchronized states across related UI elements.

This dual approach to value assignment provides a robust solution for managing the yToggle’s state and integrating it seamlessly within your application’s logic flow.

Alternatively use the SourceLink Picker in the Toolbar as a Toolbar Extension.

Changing theme on click

A custom JavaScript function can be attached to the yToggle to perform an action based on its state. Here’s an example that changes the current SubTheme, based on the value.

How to:

1. Open the Detail Panel, go to Events, unfold Input and edit EvtClicked.
2. Insert the snippet down below.

Code example:

Topggle EvtClicked

// function onToggle_2_EvtClicked (apiObject, component, eventData) {
const toggleState = eventData.data;

const currentPage = apiObject.ui.getObject(1, "y-page");

const currentTheme = toggleState === true ? "dark" : "light"; // these two subThemes need to exist in your current coreTheme

currentPage.set("generic", "meta", "subTheme", currentTheme);
// }